<template>
  <div class='dashboard-list flex flex-wrap hide-scrollbar gap-15'>
    <div class="box-item flex" v-for="(item, index) in listData" :key="index">
      <div class="item-icon flex flex-bcenter" :style="compIconStyle">
        <i class="iconfontShuzhi" :class="getIconClass(item.type)"></i>
      </div>
      <div class="item-content flex flex-column both-100">
        <div class="item-title">{{ item.title }}</div>
        <div class="item-content">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  /** 
* @param {Object} iconStyle
* 定义icon样式的属性，用于展示特定的图标样式
*/
  props: {
    // 图标背景图
    iconImagePath: {
      type: String,
      default: require('@/assets/images/dashboard/box1.png')
    },
    iconStyle: {
      type: Object,
      default: () => {
        return {
          'width': '60px',
          'height': '60px',
          'background-size': 'contain',
          'background-repeat': 'no-repeat'
        }
      }
    },
    // 定义数据组，用于展示数据
    listDataObject: {
      type: Object,
      require: true
    },
    //定义图标配置，用于展示图标
    listIconConfig: {
      type: Object,
    },
    defaultIcon: {
      type: String,
      default: 'icon-anquangongchengshi'
    }
  },
  data () {
    return {
      listData: [],
      imagePath: ''
    }
  },
  computed: {
    compIconStyle () {
      return {
        ...this.iconStyle,
        'background-image': `url(${this.iconImagePath})`
      }
    }
  },
  watch: {
    listDataObject: {
      handler () {
        this.initList()
      },
      deep: true
    }
  },
  methods: {
    initList () {
      for (const key in this.listDataObject) {
        this.listData.push({
          title: key,
          value: this.listDataObject[key],
          type: this.listIconConfig[key]
        })
      }
    },
    /**
     * 根据类型获取图标类名
     */
    getIconClass (type) {
      const inPreFix = 'icon-'
      const cleanedType = this.cleanInput(type)
      return cleanedType ? inPreFix + cleanedType : this.defaultIcon
    },
    cleanInput (input) {
      if (typeof input === 'string') {
        return input.trim()
      }
    }
  },
  created () {
    this.initList()
  },
  mounted () {

  },
  components: {},
}
</script>

<style lang='less' scoped>
.dashboard-list {
  height: calc(100% - 35px);
  gap: 15px;
  overflow: auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .box-item {
    width: 45%;
    .item-content {
      flex: 1;
      .item-content {
        font-family: Oswald, Oswald;
        font-weight: 500;
        font-size: 20px;
        color: #30dcff;
        background: rgba(143, 171, 191, 0.1);
        padding: 5px;
        box-sizing: border-box;
      }
      .item-title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #d9e7ff;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 10px;
          bottom: 0;
          width: 100%;
          height: 6px;
          background: rgba(143, 171, 191, 0.1);
        }
      }
    }
  }
}
</style>